﻿@model ArticleIndexModel
@{
    ViewData["Title"] = Model.Channel.Name;
}

@await Component.InvokeAsync("ChannelById", new { id = Model.Channel.Id, parentId = Model.Channel.ParentId })

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="fly-panel" style="margin-bottom: 0;">
                <div class="fly-panel-title fly-filter">
                    <a href="" class="layui-this">@Model.Channel.Name</a>
                </div>
                <ul class="fly-list" id="rowArts"></ul>
                <br />
            </div>
        </div>
        <div class="layui-col-md4">
            <!--今日推荐-->
            @await Component.InvokeAsync("RecommendArticle")

            <!--本周热议-->
            @await Component.InvokeAsync("HotArticle")
        </div>
    </div>
</div>

@section scripts{
    <script>
        layui.use(['jquery','flow'], function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#rowArts' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('@Url.Content("~/Article/ArticleIndex/")' +'@Model.Channel.Code'+'?page=' + page, function (res) {
                        //假设你的列表返回在data集合中
                        layui.each(res.data, function (index, item) {
                            var html = '<li><a href="#"class="fly-avatar"><img src="/res/images/avatar/0.jpg"alt="' + item.userName + '"></a><h2><a href="/Article/Index/' + item.channelCode + '" class="layui-badge">' + item.channelName + '</a><a href="/Article/Detail/' + item.id + '">' + item.title + '</a></h2><div class="fly-list-info"><a href="#"link><cite>' + item.userName + '</cite></a><span>' + item.publishDate + '</span><span><i class="layui-icon layui-icon-heart"></i> ' + item.supportCount + '</span><span class="fly-list-nums"><i class="iconfont icon-pinglun1"title="回答"></i>' + item.commentsCount +'</span></div><div class="fly-list-badge"><!--存放置顶或者精贴--></div></li>';
                            lis.push(html);
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //count为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.count);
                    });
                }
            });
        });
    </script>
}